<template>
  <view class="container">
    <!-- 1、尿酸简介 -->
    <uni-section class="uric-acid-section" title="尿酸简介" type="line">
      <uni-card :is-shadow="false" class="uric-acid-card">
        <text class="uni-cal">
          尿酸是人体代谢嘌呤产生的废物，主要通过肾脏排出。尿酸过高会导致痛风或其他健康问题。保持尿酸水平在正常范围内对预防痛风等疾病至关重要。
        </text>

        <!-- 输入框和计算按钮 -->
        <view class="input-area">
          <view class="input-group">
            <text class="label">请输入尿酸 (mg/dL):</text>
            <input v-model="uricAcid" type="number" placeholder="请输入尿酸值" />
          </view>

          <!-- 结果展示区 -->
          <view class="result-area">
            <text class="result-label">您的尿酸值:</text>
            <text class="result-value">尿酸: {{ uricAcid }} mg/dL</text>
            <text class="result-status">-{{ status }}</text>
            <text class="health-advice">{{ healthAdvice }}</text>
          </view>
          <button @click="evaluateUricAcid" type="primary">评估尿酸</button>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      uricAcid: '', // 尿酸值
      status: '', // 尿酸状态（正常、高尿酸等）
      healthAdvice: '' // 健康建议
    };
  },
  methods: {
    // 评估尿酸值并给出状态和健康建议
    evaluateUricAcid() {
      if (this.uricAcid !== '') {
        this.setStatusAndAdvice(this.uricAcid);
      } else {
        this.status = '请输入尿酸值';
        this.healthAdvice = '';
      }
    },
    // 根据尿酸值设置状态和健康建议
    setStatusAndAdvice(uricAcid) {
      if (uricAcid < 6) {
        this.status = '正常';
        this.healthAdvice = '您的尿酸值正常，保持健康饮食和生活方式，预防痛风。';
      } else if (uricAcid >= 6 && uricAcid < 7) {
        this.status = '稍高';
        this.healthAdvice = '您的尿酸值稍高，建议减少高嘌呤食物的摄入，增加水分。';
      } else if (uricAcid >= 7 && uricAcid < 9) {
        this.status = '高尿酸';
        this.healthAdvice = '您的尿酸偏高，建议咨询医生并改善饮食习惯，减少酒精和红肉摄入。';
      } else {
        this.status = '非常高';
        this.healthAdvice = '您的尿酸过高，可能导致痛风，建议尽早就医，并加强饮食管理。';
      }
    }
  }
};
</script>

<style lang="scss">
  .container {
    padding: 20rpx;

    .uric-acid-section {
      .uric-acid-card {
        .input-area {
          margin-top: 20rpx;
        }

        .input-area {
          .input-group {
            display: flex;
            margin: 10rpx 0;
          }
        }
      }

      .result-area {
        margin-top: 20rpx;
        .result-label {
          font-size: 16px;
        }
        .result-value {
          font-size: 18px;
          font-weight: bold;
        }
        .result-status {
          color: #ff4d4f;
          font-size: 14px;
        }
        .health-advice {
          font-size: 14px;
          color: #0084ff;
          margin-top: 10rpx;
        }
      }
    }
  }
</style>
